<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常见图片格式</title>
</head>
<body>
  <!-- 
    1. jpg 格式
      概述：扩展名为 .jpg 或 .jpeg，是一种有损的压缩格式（把肉眼不容易观察到的细节丢弃了）
      主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图
      使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等 —— 该格式网页中很常见
    2. png 格式
      概述：扩展名为 .png，是一种无损的压缩格式，能够更高质量的保存图片
      主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图
      使用场景：想让图片有透明背景；想更高质量的呈现图片；例如：公司 logo 图、重要配图等
    3. bmp 格式
      概述：扩展名为 .bmp，不进行压缩的一种格式，在最大程度上保留图片更多的细节
      主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图
    4. gif 格式
      概述：扩展名为 .gif，仅支持 256 种颜色，色彩呈现不是很完整
      主要特点：支持的颜色较少、支持简单透明背景、支持动态图
      使用场景：网页中的动态图片
    5. webp 格式
      概述：扩展名为 .webp，谷歌推出的一种格式，专门用来在网页中呈现图片
      主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题
      使用场景：网页中的各种图片
    6. base64 格式
      本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开
      原理：把图片进行 base64 编码，形成一串文本
      如何生成：靠一些工具或网站
      如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响
      使用场景：一些较小的图片，或者需要和网页一起加载的图片
   -->
</body>
</html>